<template>
  <CommonLayout>
    <view class="text-center my-3">
      <image :src="logo" class="rounded-full w-32 h-32"></image>
    </view>
    <view class="mx-1 rounded p-3 bg-blue-500 text-white flex justify-between items-center">
      <view>欢迎使用</view>
      <view class="text-gray-200 text-xs">
        全部服务
      </view>
    </view>
    <view class="grid grid-cols-2 gap-3 p-5">
      <view v-for="(item, index) in functions" :key="index"
            class="break-all"
            :class="index%2==0?'m-0':'mt-5 -mb-5'">
        <FunctionCard :item="item"></FunctionCard>
      </view>
    </view>
  </CommonLayout>
</template>

<script setup lang="ts">

import CommonLayout from "@/layout/CommonLayout.vue";
import {ref} from "vue";
import FunctionCard from "@/pages/index/conponents/FunctionCard.vue";
import logo from "@/static/logo.jpg";

const functions = ref([
  {
    title: '登录授权',
    url: '/pages/login/index',
    desc: '用户扫码二维码登录，获取用户头像及昵称',
    color: '#ffcf00',
  },
  {
    title: '食品管理',
    url: '/pages/product/home/index',
    desc: '监测食品的保质期并提醒用户',
    color: '#FF8103',
  },
  {
    title: '保质期计算器',
    url: '/pages/calculator/index',
    desc: '计算食品的保质期剩余时间',
    color: '#FF1C6A',
  },
  {
    title: '支付服务',
    url: '/pages/pay/index',
    desc: '为商务客户提供各类服务和支持',
    color: '#9B04DB',
  },
  {
    title: 'AI聊天',
    url: '/pages/ai/index',
    desc: '与AI进行实时聊天',
    color: '#E200A3',
  },

  {
    title: '关于我们',
    url: '',
    desc: '了解关于我们的公司或团队的信息',
    color: '#6D1DC6',
  }])

</script>

<style scoped>

</style>
